<template>
    <div class="notice-list">
        <common-list @resert="resert" ref="commonListRef" @rowClick="lineClick">
            <template #OrderState="{ scope }">
                <text class="reviewed" v-if="scope.scope.row.orderState === 1">待审核</text>
                <text class="auditRejection" v-else-if="scope.scope.row.orderState === 2">已拒绝</text>
                <text class="distributed" v-else-if="scope.scope.row.orderState === 3">待派发</text>
                <text class="pending" v-else-if="scope.scope.row.orderState === 4">待处理</text>
                <text class="acceptance" v-else-if="scope.scope.row.orderState === 5">待验收</text>
                <text class="completed" v-else-if="scope.scope.row.orderState === 6">已完工</text>
                <text class="acceptanceRejection" v-else-if="scope.scope.row.orderState === 7">已拒绝</text>
            </template>
        </common-list>
        <!-- 操作(详情) -->
        <el-dialog v-model="detail" title="工单消息" width="40%" :close-on-click-modal="false">
            <el-form label-width="80px" :inline="true" :model="editFormData" :disabled="true">
                <el-form-item label="工单编号" style="width: 44%">
                    <el-input v-model="editFormData.orderCode" />
                </el-form-item>
                <el-form-item label="设备名称" style="width: 44%">
                    <el-input v-model="editFormData.equipmentName" />
                </el-form-item>
                <el-form-item label="工单状态" style="width: 44%">
                    <el-input v-model="editFormData.orderStateName" />
                </el-form-item>
                <el-form-item label="工单内容" style="width: 95%">
                    <el-input v-model="editFormData.remark" :autosize="{ minRows: 4, maxRows: 10 }" type="textarea" />
                </el-form-item>
            </el-form>
            <template #footer>
                <span class="dialog-footer">
                    <el-button type="primary" @click="goDetail()">前往查看</el-button>
                    <el-button @click="detail = false">取消</el-button>
                </span>
            </template>
        </el-dialog>
    </div>
</template>

<script setup>
import { provide, reactive, ref } from "vue";
import { tableConfig, formConfig } from "./config";
import { getMessage } from "@/service/api/workOrderMessage.js";
import commonList from "@/components/commonList.vue";
import { useRouter } from "vue-router";
import { mainStore } from "@/store/main.js";

const store = mainStore();
const detail = ref(false);
const router = useRouter();
const commonListRef = ref(null);
const formData = reactive({ orderCode: "" });
const editFormData = reactive({
    orderStateName: "",
    orderCode: "",
    equipmentId: "",
    equipmentName: "",
    remark: "",
    orderId: ""
});

const resert = () => {
    Object.keys(formData).forEach((key) => (formData[key] = ""));
};
const goDetail = () => {
    store.tableData.id = editFormData.orderId;
    router.push({
        path: "/main/reportManage/reportOrderDetail",
        query: {
            orderCode: editFormData.orderId,
            order: editFormData.orderCode
        }
    });
    detail.value = false;
};

const lineClick = (row, column, event) => {
    editFormData.orderId = row.orderId;
    editFormData.orderCode = row.orderCode;
    editFormData.equipmentId = row.equipmentId;
    editFormData.equipmentName = row.equipmentName;
    editFormData.remark = row.remark;
    if (row.orderState == 1) {
        editFormData.orderStateName = "待审核";
    } else if (row.orderState == 2) {
        editFormData.orderStateName = "已拒绝";
    } else if (row.orderState == 3) {
        editFormData.orderStateName = "待派发";
    } else if (row.orderState == 4) {
        editFormData.orderStateName = "待处理";
    } else if (row.orderState == 5) {
        editFormData.orderStateName = "待验收";
    } else if (row.orderState == 6) {
        editFormData.orderStateName = "已完工";
    } else if (row.orderState == 7) {
        editFormData.orderStateName = "已拒绝";
    }
    detail.value = true;
};
provide("formData", formData);
provide("formConfig", formConfig);
provide("tableConfig", tableConfig);
provide("apiFn", getMessage);
provide("title", "工单消息");
</script>

<style lang="less" scoped>
.notice-list {
    height: 100%;
    .unread {
        background: rgba(0, 66, 142, 0.2);
        font-size: 12px;
        color: #00428e;
        padding: 3px 5px;
    }
    .read {
        background: #ebebeb;
        font-size: 12px;
        color: #8c8c8c;
        padding: 3px 5px;
    }
    .reviewed {
        background: rgba(255, 197, 63, 0.2);
        font-size: 12px;
        color: #ffc53f;
        padding: 3px 5px;
    }
    .auditRejection {
        background: #ebebeb;
        font-size: 12px;
        color: #8c8c8c;
        padding: 3px 5px;
    }
    .distributed {
        background: rgba(255, 77, 79, 0.2);
        font-size: 12px;
        color: #ff4d4f;
        padding: 3px 5px;
    }
    .pending {
        background: rgba(250, 173, 20, 0.2);
        font-size: 12px;
        color: #fa6400;
        padding: 3px 5px;
    }
    .acceptance {
        background: rgba(0, 66, 142, 0.2);
        font-size: 12px;
        color: #00428e;
        padding: 3px 5px;
    }
    .completed {
        background: rgba(160, 217, 17, 0.2);
        font-size: 12px;
        color: #a0d911;
        padding: 3px 5px;
    }
    .acceptanceRejection {
        background: #ebebeb;
        font-size: 12px;
        color: #8c8c8c;
        padding: 3px 5px;
    }
    .btns {
        display: flex;
        .resert {
            border: 1px solid @main-color;
            color: @main-color;
        }
    }
    :deep(.el-dialog__footer) {
        text-align: center;
    }
}
</style>
